<template>
    <ul class="Comlist wrapfix">
        <li v-for="dt in lists" :key="dt.goodsId">
            <a @click="goDetail(dt)">
                <div class="imgBox">
                    <Image v-if="dt.imageUrl" :url="dt.imageUrl"/>
                </div>
                <div class="txtBox">
                    <h3>{{dt.title}}</h3>
                    <p class="price">作者：{{dt.artistNick}} <img src="/images/rz2.png" alt=""></p>
                </div>
            </a>
        </li>
    </ul>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Image from '@/components/image.vue'
import {toast,H5CallAPPFuction} from '@/utils/common'
export default {
    props:{
        lists:Array
    },
    components:{
        Image
    },
    setup(props,{emit}){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        const goDetail = (o)=>{
            try {
                H5CallAPPFuction('sendMyCollectionInfo',JSON.stringify(o))  // 调用app的方法
            } catch (error) {
                alert('请在app中打开')
            }
        }

        const cancelLive = async (item)=>{
            const {goodsId} = item
            const res = await store.dispatch("arApi/cancel_goods_live", {goodsId})
            if(res.success){
                toast('取消喜欢成功')
                emit('refresh')
            }else{
                toast('取消喜欢失败')
            }
        }

        return{
            ...toRefs(state),
            goDetail,
            cancelLive
        }
    }
}
</script>

<style lang="scss" scoped>
    .Comlist{
        list-style: none;
        padding: 0;
        margin: 0 -15px;
        li{
            float: left;
            width: 50%;
            padding: 30px 15px 0 15px;
            a{
                display: block;
                width: 100%;
                height: 445px;
                .imgBox{
                    position: relative;
                    z-index: 10;
                    height: 320px;
                    width: 100%;
                    .btn{
                        display: flex;
                        position: absolute;
                        z-index: 10;
                        right: 20px;
                        bottom: 20px;
                        min-width: 140px;
                        height: 50px;
                        line-height: 50px;
                        background: #0E6161;
                        border-radius: 32px;
                        padding: 0 20px;
                        font-weight: bold;
                        font-size: 24px;
                    }
                }
                .txtBox{
                    height: 125px;
                    background: #0A4F4F;
                    h3{
                        width: 100%;
                        font-size: 28px;
                        font-weight: 500;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                        padding: 20px 20px 0 20px;
                        line-height: normal;
                    }
                    .price{
                        display: flex;
                       font-size: 26px; 
                       font-weight: 500;
                       color: var(--baseColor);
                       padding: 10px 20px 0 20px;
                       line-height: normal;
                       align-items: center; 
                       img{
                            width: 24px;
                            height: 24px;
                            display: inline-block;
                            margin: 0 0 0 5px;
                       }
                    }
                }
            }
        }
    }
</style>